<template>
  <div id="tenantBack"> <!--vue组件中不能存在多个div并行-->
    <div style="padding: 10px 0">
      <el-input style="width: 200px" placeholder="请输入名称" suffix-icon="el-icon-search" v-model="searchData.account"></el-input>
      <!--            <el-input style="width: 200px" placeholder="请输入邮箱" suffix-icon="el-icon-message" class="ml-5"></el-input>
                  <el-input style="width: 200px" placeholder="请输入地址" suffix-icon="el-icon-position" class="ml-5"></el-input>-->
      <el-button class="ml-5" style="background-color:#42b983;color: #FFFFFF" @click="load">搜索 </el-button>
      <el-button style="background-color:#4198b9;color: #FFFFFF" @click="reset">重置</el-button>
    </div>
    <div style="margin: 10px 0;">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item style="margin-top: 33px">
          <button class="icon-btn add-btn" @click="handleAdd">
            <div class="add-icon"></div>
            <div class="btn-txt">新增租户</div>
          </button>
        </el-form-item>
        <el-form-item >
          <el-popconfirm
              class="ml-5"
              title="您确定删除吗？"
              @confirm="delBatch"
          >
            <button class="noselect" slot="reference">
              <span class="text" >批量删除</span>
              <span class="icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z"></path></svg>
          </span>
            </button>
            <!--        <el-button style="background-color:#4198b9;color: #FFFFFF" slot="reference">批量删除<i class="el-icon-remove-outline"></i> </el-button>-->
          </el-popconfirm>
        </el-form-item>
      </el-form>


<!--      <el-button style="background-color:#42b983;color: #FFFFFF" @click="handleAdd">新增<i class="el-icon-circle-plus-outline"></i> </el-button>-->

      <el-button style="margin-left: 700px" class="ml-5">导入<i class="el-icon-bottom"></i> </el-button>
      <el-button >导出<i class="el-icon-top"></i> </el-button>

    </div>
    <el-table :data="tableData" border stripe :header-cell-class-name="headerBg"  @selection-change="handleSelectionChange">>
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column prop="id" label="ID" width="70">
      </el-table-column>
      <el-table-column prop="account" label="租户账号" width="200">
      </el-table-column>
      <el-table-column prop="password" label="密码" width="100">
      </el-table-column>
      <el-table-column prop="phoneNumber" label="手机号" width="100">
      </el-table-column>
      <el-table-column prop="state" label="状态" width="70">
      </el-table-column>
      <el-table-column prop="passwordQ" label="密保问题" width="100">
      </el-table-column>
      <el-table-column prop="passwordA" label="密保答案" width="100">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <button class="edit" @click="handleEdit(scope.row)" style="margin-top: 5px">
            <svg class="css-i6dzq1" stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-width="2" stroke="#FFFFFF" height="24" width="24" viewBox="0 0 24 24">
              <path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path>
            </svg>编辑</button>
<!--          <el-button style="background-color:#42b983;color: #FFFFFF"  @click="handleEdit(scope.row)">-->
<!--            编辑<i class="el-icon-edit"></i> </el-button>-->

          <el-popconfirm
              width="200"
              class="ml-5"
              title="您确定删除吗？"
              confirm-button-type="primary"
              @confirm="handleDel(scope.row.id)"
          >
            <button class="noselect"  style="border-radius: 50px;" slot="reference">
              <span class="text" style="font-size: 13px;font-weight: normal;">删  除</span>
              <span class="icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z"></path></svg>
          </span>
            </button>
<!--            <el-button style="background-color:#4198b9;color: #FFFFFF" slot="reference">删除<i class="el-icon-remove-outline"></i></el-button>-->
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div style="padding: 10px 0">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
    <el-dialog title="修改租户信息" :visible.sync="dialogFormVisible" width="30%">
      <el-form>
        <el-form-item label="账号" label-width="80px">
          <el-input v-model="form.account" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" label-width="80px">
          <el-input v-model="form.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" label-width="80px">
          <el-input v-model="form.phoneNumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密保问题" label-width="80px">
          <el-input v-model="form.passwordQ" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密保答案" label-width="80px">
          <el-input v-model="form.passwordA" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "TenantManage",
  data(){
    return{
      tableData: [],
      total:0,
      searchData:{},
      account:"",
      pageNum:1,
      pageSize:5,
      dialogFormVisible:false,
      form:{},
      multipleSelection:[],
      headerBg: 'headerBg'
    }
  },
  created() {
    this.load()
  },
  methods:{
    load(){
      this.request.get("http://localhost:9090/tenant/page",{
        params:{
          pageNum: this.pageNum,
          pageSize:this.pageSize,
          account:this.searchData.account
        }
      }).then(res =>{
        this.tableData=res.records
        this.total=res.total
      })
    },
    save(){
      if(this.form.id==null){
        this.form.type = "tenant"
        this.form.state = 1
      }
      this.request.post("http://localhost:9090/tenant/save",this.form).then(res =>{
        if(res){
          this.dialogFormVisible=false;
          this.pageNum=Math.floor(this.total/this.pageSize+1)
          this.reset()
          this.$message.success("保存成功")
        } else{
          this.$message.error("保存失败")
        }
      })
    },
    handleAdd(){
      this.form={}
      this.dialogFormVisible=true;
    },
    handleEdit(row){
      this.form=row
      this.dialogFormVisible=true;
    },
    handleDel(id){
      this.request.delete("http://localhost:9090/tenant/"+id).then(res =>{
        if(res){
          this.dialogFormVisible=false;
          this.reset()
          this.$message.success("删除成功")
        } else{
          this.$message.error("删除失败")
        }
      })
    },
    delBatch(){
      let ids = this.multipleSelection.map(v=> v.id)
      this.request.post("http://localhost:9090/tenant/del/batch",ids).then(res =>{
        if(res){
          this.dialogFormVisible=false;
          this.reset()
          this.$message.success("删除成功")
        } else{
          this.$message.error("删除失败")
        }
      })
    },
    reset(){
      this.searchData= {}
      this.load()
    },
    cancel(){
      this.dialogFormVisible=false
      this.load()
    },
    handleSizeChange(pageSize){
      this.pageSize=pageSize
      this.load()
    },
    handleCurrentChange(pageNum){
      this.pageNum=pageNum
      this.load()
    },
    handleSelectionChange(val){
      this.multipleSelection=val
    }
  }
}
</script>

<style>
button.noselect {
  position: relative;
  width: 150px;
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  background: red;
  border: none;
  border-radius: 10px;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.15);
  background: #e62222;
}

button.noselect, button span {
  transition: 200ms;
}

button.noselect .text {
  transform: translateX(40px);
  color: white;
  font-weight: bold;
  font-size:16px;
}

button.noselect .icon {
  position: absolute;
  border-left: 1px solid #c41b1b;
  transform: translateX(110px);
  height: 30px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;

}

button.noselect svg {
  width: 15px;
  fill: #eee;
}

button.noselect:hover {
  background: #ff3636;
}

button.noselect:hover .text {
  color: transparent;
}

button:hover .icon {
  width: 150px;
  border-left: none;
  transform: translateX(0);
}

button:focus {
  outline: none;
}

button:active .icon svg {
  transform: scale(0.8);
}
.icon-btn {
  width: 40px;
  height: 40px;
  border: 1px solid #cdcdcd;
  background: white;
  border-radius: 25px;
  overflow: hidden;
  position: relative;
  transition: width 0.2s ease-in-out;
  font-weight: 500;
  font-family: inherit;
}

.add-btn:hover {
  width: 120px;
  margin-top:7px
}
.add-btn::before,
.add-btn::after {
  transition: width 0.2s ease-in-out, border-radius 0.2s ease-in-out;
  content: "";
  position: absolute;
  height: 4px;
  width: 10px;
  top: calc(50% - 2px);
  background: seagreen;
}

.add-btn::after {
  right: 9px;
  overflow: hidden;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
}

.add-btn::before {
  left: 9px;
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
}

.icon-btn:focus {
  outline: none;
}

.btn-txt {
  opacity: 0;
  transition: opacity 0.2s;
  font-weight: bold;
  font-size:16px;
}

.add-btn:hover::before,
.add-btn:hover::after {
  width: 4px;
  border-radius: 2px;
}

.add-btn:hover .btn-txt {
  opacity: 1;
}

.add-icon::after,
.add-icon::before {
  transition: all 0.2s ease-in-out;
  content: "";
  position: absolute;
  height: 20px;
  width: 2px;
  top: calc(50% - 10px);
  background: seagreen;
  overflow: hidden;
}

.add-icon::before {
  left:17px;
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
}

.add-icon::after {
  right: 17px;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
}

.add-btn:hover .add-icon::before {
  left: 10px;
  height: 4px;
  top: calc(50% - 2px);
}

.add-btn:hover .add-icon::after {
  right: 10px;
  height: 4px;
  top: calc(50% - 2px);
}
button.edit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-image: linear-gradient(to top, #30cfd0 0%, #42b983 100%);
  border: solid 3px transparent;
  background-clip: padding-box;
  box-shadow: 0px 0px 0px 3px #ffffff00;
  color: white;
  min-height: 43px;
  padding: 0 13px 0 13px;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: all .5s ease;
  width:150px
}

button.edit:active {
  transform: scale(.9);
  transition: all 100ms ease;
}

button.edit:hover {
  box-shadow: 0px 0px 0px 3px #42b999;
}

button.edit svg {
  width: 16px;
}
</style>
